<template>
  <view class="login-container">
    <!-- 顶部胶囊区域 -->
    <view class="custom-navbar" :style="{ height: statusBarHeight + 'px' }">
      <view class="navbar-content" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="logo">家政通</view>
      </view>
    </view>
    
    <!-- 品牌介绍区域 -->
    <view class="brand-area">
      <image class="logo-image" src="/static/logo.png" mode="aspectFit"></image>
      <view class="brand-name">家政通</view>
      <view class="brand-slogan">让家务更简单，让生活更美好</view>
    </view>

    <!-- 登录按钮区域 -->
    <view class="login-area">
      <view class="service-intro">
        <view class="service-item">
          <text class="iconfont icon-jiazhengbaojie-01"></text>
          <text>专业保洁</text>
        </view>
        <view class="service-item">
          <text class="iconfont icon-jujiahuli2"></text>
          <text>烹饪服务</text>
        </view>
        <view class="service-item">
          <text class="iconfont icon-pengren"></text>
          <text>家庭护理</text>
        </view>
      </view>
      
      <button class="btn-login" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">
        <text class="iconfont icon-wechat"></text>
        微信一键登录
      </button>
      
      <view class="agreement">
        <text>登录即表示同意</text>
        <text class="link">《用户协议》</text>
        <text>和</text>
        <text class="link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/user'

export default {
  data() {
    return {
      statusBarHeight: 20,
      menuButtonInfo: null
    };
  },
  
  onLoad() {
    // 获取状态栏高度
    // #ifdef MP-WEIXIN
    try {
      const windowInfo = wx.getWindowInfo();
      this.statusBarHeight = windowInfo.statusBarHeight || 20;
      
      // 获取胶囊按钮位置信息
      this.menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    } catch (error) {
      console.error('获取系统信息失败', error);
      // 使用默认值
      this.statusBarHeight = 20;
    }
    // #endif
    
    // #ifndef MP-WEIXIN
    try {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 20;
    } catch (error) {
      console.error('获取系统信息失败', error);
      this.statusBarHeight = 20;
    }
    // #endif
  },
  
  methods: {
    // 处理获取手机号
    async handleGetPhoneNumber(e) {
      try {
        if (e.detail.errMsg === 'getPhoneNumber:ok') {
          const code = await this.getLoginCode();
          if (!code) {
            uni.showToast({
              title: '登录失败，请重试',
              icon: 'none'
            });
            return;
          }
          
          // 调用登录
          const userStore = useUserStore();
          const result = await userStore.wxLogin(code);
          
          if (result) {
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              });
            }, 1500);
          } else {
            uni.showToast({
              title: '登录失败，请重试',
              icon: 'none'
            });
          }
        } else {
          uni.showToast({
            title: '您取消了授权',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('登录过程发生错误', error);
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 获取微信登录code
    getLoginCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: 'weixin',
          success: (res) => {
            resolve(res.code);
          },
          fail: (err) => {
            console.error('获取登录code失败', err);
            resolve('');
          }
        });
      });
    }
  }
}
</script>

<style lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #ffffff;
}

/* 自定义导航栏 */
.custom-navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #ffffff;
}

.navbar-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  color: #07c160;
}

/* 品牌展示区域 */
.brand-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120px;
  padding: 20px;
}

.logo-image {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.brand-name {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.brand-slogan {
  font-size: 16px;
  color: #666;
  text-align: center;
}

/* 登录区域 */
.login-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 30px;
  margin-top: 40px;
}

.service-intro {
  display: flex;
  justify-content: space-around;
  margin-bottom: 50px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-item text {
  color: #666;
  margin-top: 8px;
}

.iconfont {
  font-size: 32px;
  color: #07c160;
}

.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #07c160;
  color: #fff;
  border-radius: 50px;
  font-size: 16px;
  height: 44px;
  margin-bottom: 20px;
}

.btn-login .iconfont {
  color: #fff;
  font-size: 20px;
  margin-right: 8px;
}

.agreement {
  text-align: center;
  font-size: 12px;
  color: #999;
}

.link {
  color: #07c160;
}
</style>
